<template>
  <view style="background-color: #f1f1f1;height: 180vh;">
    <scroll-view class="scroll-view" scroll-x="true">
      <view class="table-row" v-for="(item, index) in tableData" :key="index">
        <view class="cell" v-for="(value, key) in item" :key="key">{{ value }}</view>
      </view>
    </scroll-view>
	
	<view class="table-container">
	<uni-table border stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th >序号</uni-th>
				<uni-th >维护内容</uni-th>
				<uni-th >执行情况确认</uni-th>
				<uni-th >图片</uni-th>
				<uni-th >异常情况描述</uni-th>
				<uni-th >项目</uni-th>
				<uni-th >位置</uni-th>
			</uni-tr>
			<uni-tr v-for="(item,index) in dataListTwo" id='index'>
				<uni-td>{{item.YNO}}</uni-td>
				<uni-td>{{item.YWHNR}}</uni-td>
				<uni-td>
					<view v-if="dataList.YYDJ==2">{{item.YZXQK==1?'正常':'异常'}}</view>
	<view class="dxRadio" v-else>
		<u-radio-group
		    v-model="radiovalue1[index]"
			placement="column"
		    @change="val => groupChange(val,index)"
		  >
		    <u-radio
		      :customStyle="{marginBottom: '8px'}"
		      v-for="(item, index1) in radiolist1"
		      :key="index1"
		      :label="item.name"
		      :name="item.name"
		      @change="val => radioChange(val,index)"
		    >
		    </u-radio>
		  </u-radio-group>
	</view>
				</uni-td>
				<uni-td>
					<u-album :urls="urls[index]" :singleSize="50" :multipleSize="50" :maxCount="1" :rowCount="1" 
						v-if="dataList.YYDJ==2"></u-album>
					<view class="photoBox" v-else>
						<u-upload
								:fileList="fileList1[index]"
								@afterRead="afterRead"
								@delete="deletePic"
								:name=String(index)
								:key=index
								multiple
								:maxCount="10"
								accept="image"
								:capture="capture"
							></u-upload>
					</view>
				</uni-td>
				
				<uni-td>
					<view v-if="dataList.YYDJ==2">{{item.YICMS}}</view>
					<view v-else>
					<u-input placeholder="" v-model="dataListTwo[index].YICMS" />
					</view>
				</uni-td>
				<uni-td>{{item.YXM}}</uni-td>
				<uni-td>{{item.YWEIZ}}</uni-td>
			</uni-tr>
		</uni-table>
  </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Tom', age: '28', gender: 'Male' },
        { name: 'Jerry', age: '25', gender: 'Male' },
        // ...更多数据
      ],
	  dataListTwo:[]
    };
  }
};
</script>
 
<style>
.scroll-view {
  white-space: nowrap;
  width: 100%;
}
 
.table-row {
  display: inline-block;
  white-space: normal;
}
 
.cell {
  display: inline-block;
  width: 100px; /* 根据需要设置宽度 */
  text-align: center;
  border: 1px solid #ccc;
  margin-right: 10px; /* 单元格间距 */
}

table{
	border-collapse: collapse;
	text-align: center;
}
table1,th,td{
	border: 1px solid gainsboro ;
}
.table-container {
  /* width: 620px; */
  overflow: auto;
	background-color: white;
	/* height: 300px; */
}

table1 {
  width: 95%; /* 表格宽度占满容器 */
  table-layout: fixed; /* 固定表格布局 */
}

td1 {
  width: 25%; /* 每列宽度为容器宽度的四分之一 */
}
.top{
	width: 90%;
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.topOne-left{
	width: 200rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.topOne-right{
	width: 400rpx;
	text-align: center;
	padding-top: 20rpx;
	color: gray;
	font-size: 28rpx;
}
.two{
	background-color: white;
}
.two-one{
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2{
	background-color: white;
}
.two2-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.two2-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.wxxx{
	width: 90%;
	background-color: white;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
}
.wxxxOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.wxxxOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.ddlcjlBox{
	width: 90%;
	position: relative;
	top: 160rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 28rpx;
}
.ddlcjlBox-top{
	height: 70rpx;
	color: gray;
	text-align: center;
	font-size: 38rpx;
	padding-top: 15rpx;
}
.ddlcjlBox-two{
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
	padding-left: 15rpx;
}
.ddlcjlBox-twoLeft{ 
	width: 320rpx;
}
.ddlcjlBox-twoCenter{
	width: 100rpx;
}
.ddlcjlBox-twoRightr{
	width: 100rpx;
}
.bcjlBox{
    width: 90%;
	height: 70rpx;
	position: relative;
	top: 200rpx;
	margin: 0 auto;
	background-color: white;
	color: gray;
	font-size: 32rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.jlBox{
	width: 90%;
	height: 00rpx;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 42rpx;
	padding-top: 0rpx;
	padding-left: 300rpx;
}
.btnBox{
	width: 100%;
	height: 80rpx;
	position: relative;
	top: 0rpx;
	left: -270rpx;
	display: flex;
	justify-content: space-between;
}
.btnBox-left{
	width: 350rpx;
	border-right: 1px solid #ccc;
}
.btnBox-right{
	width: 350rpx;
}
</style>